<template>
  <div :class="{'scroll-content':true,'small':scrollbarsamll,'overflowX':overflowX}" :style="'height: calc(100vh - ' + spaceBlockHeight + 'px);'">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "ContentScroll",
  props: {
    /*值越过小会导致出现外滚动条*/
    spaceBlockHeight: {
      type: Number | String,
      default: 0,
    },
    scrollbarsamll:{
      type: Boolean,
      default: false ,
    },
    overflowX:{
      type: Boolean,
      default: false ,
    }
  },
}
</script>

<style scoped>
.scroll-content {
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
}
.scroll-content.overflowX{overflow-x: auto}
.scroll-content.small::-webkit-scrollbar {
  width: 5px;/*修改滚动条宽度*/
  height: 5px;
}
.scroll-content.small::-webkit-scrollbar-thumb {
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgb(233, 233, 235);
  background: #666666;
}
.scroll-content.small::-webkit-scrollbar-thumb:hover {/*鼠标移入样式*/
  background: #333333;
}
.scroll-content.small::-webkit-scrollbar-track {
  border-radius: 5px;
  background: #eeeeee;
}
</style>
